<template>
  <div class="wrap w-baojia1 detail">
    <main class="position-box">
    <cube-scroll
    ref="scroll"
    :data="items"
    :options="options"
    @pulling-down="onPullingDown"
    @pulling-up="onPullingUp">
    <header>
          <img @click="reback" src="@/assets/img/r_w.png" alt="" />
    </header>
    <div class="head">
        <h3><span>——————</span> 第三轮报价 <span>——————</span></h3>
        <p>温馨提示：请您在招标结束前发起投标，谢谢！</p>
    </div>
    <section>
        <div class="time">
            <h4>距本轮结束还有</h4>
            <p><span>{{h}}</span>&nbsp;&nbsp;时&nbsp;<span>{{m}}</span>&nbsp;分&nbsp;<span>{{s}}</span>&nbsp;秒</p>
        </div>
        <div class="price clearfix" v-if="!bid_data.is_pushPrice">
            <span>总价：</span>
            <input v-model="bjVal" type="text" placeholder="请输入您的报价" />
            <button @click = "pushPrice">确认报价</button>
        </div>
        <div class="ts clearfix">
            <img src="@/assets/img/ts.png" alt="" />
            <p>您本轮报价金额为:{{formatMoney}}元</p><br>
            <p>本轮您还有{{ bid_data.is_pushPrice== 1?'0':'1'}}次报价机会，当前最低报价：￥{{bid_data.now_minPrice}}元<br>您的报价至少要小于等于：￥{{bid_data.now_mixPush}}元,最低降幅千分之四</p>
        </div>
    </section>
    <ul class="xm-info lists">
        <li class="tit">
            <img src="@/assets/img/baojia_icon1.png" alt="" /><span>项目信息</span>
        </li>
        <li class="clearfix list">
            <p>项目名称：</p>
            <p>{{bid_data.bid_name}}</p>
        </li>
        <li class="clearfix list">
            <p>项目编号：</p>
            <p>{{bid_data.bid_sn}}</p>
        </li>
        <li class="clearfix list">
            <p>收货地点：</p>
            <p>{{bid_data.area}}</p>
        </li>
        <li class="clearfix list">
            <p>收货时间：</p>
            <p>{{bid_data.bid_arrival_time}}</p>
        </li>
        <li class="clearfix list">
            <p>预算：</p>
            <p>{{bid_data.bid_budget}}</p>
        </li>
        <li class="clearfix list">
            <p>最低降幅：</p>
            <p>千分之四</p>
        </li>
    </ul>
    <ul class="zb-info lists">
        <li class="tit">
            <img src="@/assets/img/baojia_icon2.png" alt="" /><span>招标信息</span>
        </li>
        <li class="clearfix list">
            <p>竞价开始时间：</p>
            <p>{{bid_data.bid_start_time}}</p>
        </li>
        <li class="clearfix list">
            <p>付款方式：</p>
            <p>{{bid_data.bid_pay_type}}</p>
        </li>
        <li class="clearfix list">
            <p>参与规则：</p>
            <p>{{guize}}</p>
        </li>
    </ul>
    <ul class="bz-info lists">
        <li class="tit">
            <img src="@/assets/img/baojia_icon3.png" alt="" /><span>备注信息</span>
        </li>
        <li class="clearfix list">
            <p>{{bid_data.bid_remark}}</p>
        </li>
    </ul>
    <div class="pro">
        <div class="tit">
            <img src="@/assets/img/baojia_icon4.png" alt="" /><span>招标产品</span>
        </div>
        <table cellspacing="0" >
            <tr>
                <th>名称</th>
                <th>数量</th>
                <th>金额</th>
                <th>详情</th>
            </tr>
            <tr v-for="(item,index) in bid_data.goods">
                <td>{{item.goods_name}}</td>
                <td>{{item.goods_num}}</td>
                <td>{{item.goods_price}}元</td>
                <td @click="showGoods(index)" >
                  <button>产品详情</button>
                </td>  
            </tr>
        
        </table>
    </div>
    <div class="pro" >
        <div class="tit">
            <img src="@/assets/img/baojia_icon4.png" alt="" /><span>投标明细</span>
        </div>
        <table cellspacing="0" >
            <tr>
                <th>供应商</th>
                <th>金额</th>
                <th>轮次</th>
                <th>报价时间</th>
            </tr>
            <tr v-for="(item,index) in bid_data.record" :key="index">
                <td>{{item.user_company}}</td>
                <td>{{item.price}}</td>
                <td>第{{item.rotation}}轮</td>
                <td>{{item.add_time}}</td>            
            </tr>
           
        </table>
      
    </div>
</cube-scroll>
</main>
</div>


</template>
<script>
    
export default {
  data(){
    return{
        headBg: false,  //左上角 “< 投标” 使用数据  当页面向下滚动  该值变为 true
        bid_data:{},
        bjVal:0.00,
        formatMoney:0.00,
        h: '00', //时
        m: '00', //分
        s: '00', //秒
        guize: '本次报价共3轮，每轮允许报价1次，每轮报价10分钟',
        goods_detail:{
          goods_name:'',
          goods_brand_model:'',//品牌型号
          goods_unit:'',
          goods_price:'',
          goods_num:'',
          goods_remark:''
        },
        isProMaskShow: false, // 是否显示弹框
        downTime:'',

        //上拉加载，下拉刷新
        items:[],
         options: {
              // 配置下拉刷新 
              pullDownRefresh: {
                  threshold: 60,
                  stop: 40,
                  txt:'刷新'
              }, 
              // 配置上拉加载更多 
              pullUpLoad: {
                  threshold: 0,
                  txt: {
                      more: '加载更多',
                      noMore: '没有更多数据'
                  }
              }
              // 配置上拉加载，若要关闭可直接 pullUpLoad：false
          },
          
     }
  },
  async created(){
    let user_token = this.getUserToken()
    let bidId =  this.$route.query.bid_id
    let re = await this.$axios.post('bid/getBidDetail',{
        bid_id:bidId,
        user_token:user_token
    })
    if(re.code == 200){
        let toWhere = '/bid/'+re.data.toWhere;
        //如果不是当前页面跳转
        if(toWhere != this.$route.path){
            this.$router.push({path:'/'+toWhere+'?bid_id='+bidId})
            
        }else{
              let bid_data = re.data;
              //如果本轮已报价，显示报价金额
              if(bid_data.is_pushPrice == 1){
                  this.formatMoney = this.toMoney(bid_data.current_pushPrice)
              }
              this.bid_data = bid_data
              
              //最低价格提示
              if(this.bid_data.time1 > 3000){
                this.$createDialog({
                    type:'alert',
                    title:'提示',
                    content: '当前最低报价：'+bid_data.now_minPrice+'，下一次报价至少要小于等于：￥'+bid_data.now_mixPush+'元',
                    icon: ''
                }).show()
              }
              this.setCountDown();

        }    


     }

  },

  watch: {
    bjVal: function (val) {
      this.formatMoney = this.toMoney(val)
    },
  },
  
  mounted(){
            
  },
  
  methods:{
  //报价
    pushPrice:function(){  //判断报价是否为空  如果为空 弹出提示  否则 弹出模态框
        let val = this.bjVal;
        let formatMoney = this.formatMoney;//格式化金额
        let bid_data = this.bid_data
        let user_token = this.getUserToken();
        if(val == ""){
            this.$createDialog({
                type:'alert',
                title:'提示',
                content: '请填写您的报价',
                icon: ''
            }).show()
        }else if(parseFloat(val) > parseFloat(this.bid_data.now_mixPush)){
            this.$createDialog({
                type:'alert',
                title:'提示',
                content: '您的报价至少要小于等于：'+this.bid_data.now_mixPush,
                icon: ''
            }).show()
        }else{
            this.$createDialog({
                    type: 'confirm',
                    icon: '',
                    title: '友情提示',
                    content: '您的报价金额为：'+formatMoney+'元,确认报价？',
                    onConfirm: () => {
                       this.$axios.post('bid/pushPrice',{
                          user_token:user_token,
                          bid_id:this.bid_data.bid_id,
                          price:val,
                          rotation:3
                       })
                       .then(response => {
                           if(response.code == 200){
                                this.$createDialog({
                                    type:'alert',
                                    title:'提示',
                                    content: '报价成功',
                                    icon: ''
                                }).show()
                                bid_data.is_pushPrice = 1;
                                this.bid_data = bid_data
                            }else{
                                this.$createDialog({
                                    type:'alert',
                                    title:'提示',
                                    content: response.msg,
                                    icon: ''
                                }).show()
                        
                            }
                       })
                           
                     },
            }).show()
        
        }
      },
    //显示商品
     showGoods(index){
      let goods = this.bid_data.goods[index];
      this.$createDialog({
        type:'alert',
        title:`${goods.goods_name}`,
        content: `品牌/型号: ${goods.goods_brand_model} <br/> 单位: ${goods.goods_unit} <br/> 数量: ${goods.goods_num} <br/> 单价: ${goods.goods_price} <br/> 产品说明: ${goods.goods_remark}`,
        icon: ''

      }).show()
    },
    //倒计时
       setCountDown(){
        let that = this;
        let time = 1000;
        let bid_data = this.bid_data
          this.downTime = setInterval(function(){
              if (bid_data.time1 <= 0) {
                  bid_data.time1 = 0
                      //如果报名，跳转
                      if(bid_data.isEnroll == 1){
                        let user_token = that.getUserToken();
                          let res =  that.$axios.post('bid/getGoWhere',{
                            bid_id:bid_data.bid_id,
                            user_token:user_token
                          }).then(function(res){
                            if(res.code == 200){
                                that.$router.push({path:'/bid/'+res.data.toWhere,query: {
                                bid_id: bid_data.bid_id,
                               }})
                            }

                          })
                         
                      }
               }else{
                    let formatTime = that.getFormat(bid_data.time1);
                    bid_data.time1 -= time
                    that.bid_data = bid_data
                    that.h = formatTime.hh
                    that.m = formatTime.mm
                    that.s = formatTime.ss
              }
           }, time)

      },
       //下拉刷新
     async onPullingDown() {
      if(this.bid_data.time1 > 3000){
          clearInterval(this.downTime);
          let user_token = this.getUserToken()
          let bidId =  this.$route.query.bid_id
          let re = await this.$axios.post('bid/getBidDetail',{
              bid_id:bidId,
              user_token:user_token
          })
          if(re.code == 200){
              //如果不是当前页面跳转
              let bid_data = re.data;
              this.bid_data = bid_data
              //最低价格提示
              this.$createDialog({
                  type:'alert',
                  title:'提示',
                  content: '当前最低报价：'+bid_data.now_minPrice+'，下一次报价至少要小于等于：￥'+bid_data.now_mixPush+'元',
                  icon: ''
              }).show()
              
              this.setCountDown();

           }
        }
          this.$refs.scroll.forceUpdate()

      },
       //上拉加载更多
      async onPullingUp(){
            clearInterval(this.downTime);
              //遮罩  
            const toast = this.$createToast({
              txt: '加载中...',
              //mask: true
            })
            toast.show()

              //获取数据
            let user_token = this.getUserToken()
            let re = await this.$axios.post('bid/getBidDetail',{
                bid_id:this.bid_data.bid_id,
                user_token:user_token,
              
              });

            if(re.code == 200){
                  this.bid_data = re.data;
                   //如果本轮已报价，显示报价金额
                  if(this.bid_data.is_pushPrice == 1){
                      this.formatMoney = this.toMoney(this.bid_data.current_pushPrice)
                  }
                  
                  this.setCountDown();
              }
            toast.hide()
            this.$refs.scroll.forceUpdate()
      },
      reback(){
        if(this.$route.query.redirect){
              if(this.$route.query.bidtype){
                this.$router.replace({path:this.$route.query.redirect,query:{
                  bidtype:this.$route.query.bidtype
                }});
              }else{
                this.$router.replace({path:this.$route.query.redirect})
              }
        }else{
             this.$router.replace({path:'/'})
        }
     }

    

  },

  beforeRouteLeave(to,from,next){
    clearInterval(this.downTime);
    next()
  },

}
</script>